<template>

  <div class="card" style="margin: 10px 0;">
    <div style="font-size: 20px; font-weight: bold; margin-bottom: 15px">评价</div>

    <div v-if="ifre=='true'" style="margin-bottom: 20px">

      <div style="display: flex;justify-content: center;margin-bottom: 20px;margin-top: 10px;">
        <span style="font-size: 24px">根据您的满意度来对我们进行打分：</span>
        <el-rate
            style="font-size: 24px"
            v-model="form.type"
            :colors="colors">
        </el-rate>
      </div>

      <quill-editor v-model="form.content" />
      <div style="margin-top: 5px; text-align: right">
        <el-button type="primary" @click="addComment(null)">评价</el-button>
      </div>
    </div>

    <div>
      <div v-for="item in commentList" :key="item.id" style="display: flex; grid-gap: 15px; margin-bottom: 20px">
        <img :src="item.userinfo.userPic" alt="" style="width: 50px; height: 50px; border-radius: 50%">
        <div style="flex: 1;">
          <div style="margin-bottom: 5px; color: #666;display: flex">
            {{ item.userinfo.userNickname }}
            <el-rate
                v-model="item.type"
                :colors="colors"
                style="pointer-events: none;margin-left: 20px;"
            >
            </el-rate>
          </div>

          <div style="margin-bottom: 5px" v-html="item.content"></div>


          <div style="font-size: 13px; color: #666; margin-bottom: 10px">
            <span>{{ item.time }}</span>
            <span style="margin: 0 20px; cursor: pointer" @click="handleReply(item)" :class="{ 'highLight' : item.showReply }">
                <i class="el-icon-s-comment"></i>回复
              </span>
            <span style="cursor: pointer" @click="del(item.id)" v-if="user.id === item.userId">
                <i class="el-icon-delete"></i>删除
              </span>
          </div>




          <div v-if="item.children.length">
            <div v-for="sub in item.children" :key="sub.id" style="display: flex; grid-gap: 15px; margin-bottom: 10px">
              <img :src="sub.userinfo.userPic" alt="" style="width: 50px; height: 50px; border-radius: 50%">
              <div style="flex: 1;">
                <div style="margin-bottom: 5px">{{ sub.content }}</div>

                <div style="font-size: 13px; color: #666; margin-bottom: 10px">
                  <span>{{ sub.time }}</span>
                  <span style="margin: 0 20px; cursor: pointer"  :class="{ 'highLight' : sub.showReply }">

                    </span>
                  <span style="cursor: pointer" @click="del(sub.id)" v-if="user.id === sub.userId">
                      <i class="el-icon-delete"></i>删除
                    </span>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {listComment, getComment, delComment, addComment, updateComment,selectTree} from "@/api/project/comment";
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: "index",
  props: {
    id: {
      type: Number,
    },
    table: {
      type: String,
    },
    type: {
      type: String,
    },
    ifre: {
      type: String,
    },



  },
  components: {
    quillEditor
  },
  data() {
    return {
      form: {},
      commentList: [],
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      user: ""
    };
  },
  created() {
    this.user=JSON.parse(localStorage.getItem("userInfo"))
    this.loadComment()
  },



  methods:{
    processContent(e) {
      if (!e) return "";
      // 使用 DOMParser 解析富文本内容
      const parser = new DOMParser();
      const doc = parser.parseFromString(e, "text/html");

      // 修改 <p> 标签样式
      const paragraphs = doc.querySelectorAll("p");
      paragraphs.forEach((p) => {
        p.style.textIndent = "2em"; // 首行缩进
        p.style.lineHeight = "2.0"; // 行高
        p.style.margin = "10px 0"; // 上下边距
        p.style.padding = "0 10px"; // 上下边距
      });

      // 修改 <img> 标签样式
      const images = doc.querySelectorAll("img");
      images.forEach((img) => {
        img.style.width = "250px"; // 图片宽度
        img.style.height = "auto"; // 高度自适应
        img.style.borderRadius = "8px"; // 圆角
        img.style.margin = "10px 0"; // 上下边距
      });

      // 返回处理后的 HTML 内容
      return doc.body.innerHTML;
    },
    del(id) {   // 单个删除
      if (!localStorage.getItem("userInfo")) {
        this.$message.error("请先登录！");
        this.$router.push('/login')
        return;
      }
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        delComment({id:id}).then(res => {
          if (res.data == 1) {   // 表示操作成功
            this.$message.success('操作成功')
            this.loadComment()
          } else {
            this.$message.error('操作失败')  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    handleReply(comment) {
      if (!localStorage.getItem("userInfo")) {
        this.$message.error("请先登录！");
        return;
      }
      this.$set(comment, 'showReply',  !comment.showReply)
    },
    addComment(pComment) {  // pComment表示父级的评论对象
      // 判断是否登录,没有登录则显示登录组件
      if (!localStorage.getItem("userInfo")) {
        this.$message.error("请先登录！");
        return;
      }





      this.form.module = this.table   //
      this.form.fid = this.id  //
      this.form.userId = this.user.id
      if (pComment) {   // 表示回复
        this.form.pid = pComment.id
        this.form.content = pComment.reply
      }
      addComment(this.form).then(res => {
        if (res.data == 1) {
          this.$message.success('操作成功')
          this.form = {}
          this.loadComment()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    loadComment() {

      selectTree(this.id,this.table).then(res => {
        this.commentList = (res.data || []).map(item => ({
          ...item,
          content: this.processContent(item.content),
        }));
      })
    },

  },
}
</script>

<style scoped>

</style>
